﻿<Segmented TValue="string">
  <SegmentedItem Value="@("user1")">
    <div style=" padding: 4px;">
      <Avatar Src="https://joeschmoe.io/api/v1/random" />
      <div>User 1</div>
    </div>
  </SegmentedItem>
  <SegmentedItem Value="@("user2")">
    <div style="padding: 4px;">
      <Avatar Style="background-color: #f56a00 ">K</Avatar>
      <div>User 2</div>
    </div>
  </SegmentedItem>
  <SegmentedItem Value="@("user3")">
    <div style="padding: 4px;">
      <Avatar style="background-color: #87d068;" Icon="user"></Avatar>
      <div>User 3</div>
    </div>
  </SegmentedItem>
</Segmented>

<br />

<Segmented TValue="string">
  <SegmentedItem Value=@("spring")>
    <div style="padding: 4px;">
      <div>Spring</div>
      <div>Jan-Mar</div>
    </div>
  </SegmentedItem>
  <SegmentedItem Value=@("summer")>
    <div style="padding: 4px;">
      <div>Summer</div>
      <div>Apr-Jun</div>
    </div>
  </SegmentedItem>
  <SegmentedItem Value=@("autumn")>
    <div style="padding: 4px;">
      <div>Autumn</div>
      <div>Jul-Sept</div>
    </div>
  </SegmentedItem>
  <SegmentedItem Value=@("winter")>
    <div style="padding: 4px;">
      <div>Winter</div>
      <div>Oct-Dec</div>
    </div>
  </SegmentedItem>
</Segmented>